<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性）
		   1.控制字体：font-family、font-size、font-weingt
		   2.控制文本布局：text-aglin、line-height、letter-spacing、word-spacing
		   3.文本的修饰效果：text-decoration、text-shadow
		   4.处理文本效果：white-space
		 -->
		 <style>
			
			 /* css3语法：选择器{
				        属性:属性值;
						属性：属性值;
						
				              }
							  叫法：一个样式
			 */
			bod y div#d1{/*通过加权方式，锁定元素  权值：102*/
			
				color: #f00fff;
				/*知识点1：文本格式化属性控制文字*/
				font-family:华文彩云,sans-serif;
				/*设置多个字体：浏览器会按照顺序寻找可用字体
				用户体验，用户系统有什么字体，优先指定字体
				通常与统配选择器使用    *{}
				*/
			   /*
			   知识点2：文本格式化属性控制字体
			   font-size：字体大小属性，与单位共存
			   单位  px 像素  使用特点：绝对值、PC值
			   |em 相对单位，理解：倍数
			          使用特点：相对于元素按照倍数方式、移动端
			   */
			  /*知识点3：文本格式化属性控制字体
			  font-weight:字体粗细属性，不存在单位
			            属性值：数值【100  200 300  ....900】
						       常用数值：400
						        单词【normal==normal、bold】
			  使用方法：统配选择器搭配使用：指定定全局字体正常字体粗细
			  */
			 font-weight: 900;
			  font-size: 2em;
			  /*补充：1.英文大写2.首字母大写；3.段落开始间距200px*/
			  text-transform: uppercase;
			  text-transform: capitalize;
			  text-indent: 200px;
			  
			}
			div#d1{ /*通过加权方式，锁定元素  权值：101*/
			
				color: #55aaff;
				/*知识点4：文本格式化属性控制文本格式【对齐、间隙】
				text-align.left|right|center|justify:两端对齐,用于弹性布局
				*/
			   text-align:justify;
			   /*知识点5：文本格式化属性控制文本格式【对齐、间隙】
			   行高属性line-height:文本垂直效果
			   使用方式：1.高度属性：属性值一致
			            2.在高度属性上加行高属性：属性值一
			   */
			  border: 1px solid red;
			  height: 100px;
			  line-height: 100px;
			  /*补充：文本对齐和行高属于对齐|间隙：字符和单词*/
			  /*知识点6：letter-spacing:设置字符之间间隙
			     知识点7：word-spacing:设置单词之间间隙
			  */
			 letter-spacing: 10px;
			 word-spacing: 10px;
			}
			#d1{/*权值：100*/
				color: #e4393c;
			}
			a.c1{/*权值：11*/
			   /*知识点6：text-decoration 修饰超链接样式
			   使用方法：与配通符一起使用，设置全局页面超链接样式
			   属性值：none|underline|line-through
			   */
			  text-decoration: line-through;
			  /*知识点9：text-shadow  修饰文本阴影
			    属性值：X轴  Y轴 blur模糊距离 color
			  */
			 text-shadow: 5px 5px 5px #ff0;
			}
			p{
				border: 1px solid red;
				/*知识点10：文本换行效果
				 white-space:文本换行属性
				 属性值：nowrap  不换行，只显示一行，超出部分隐藏
				 |pre 保存空格和回车|normal默认，空格合并，换行隐藏
				 
				*/
			   white-space: pre;
			   overflow: hidden;
			}
		 </style>
	</head>
	<body>
		<!-- 需求：创建div同时指定别名，添加假文【tab】 
		           id选择器，通过加权找到div,添加颜色
		-->
		<div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores labore consectetur totam nisi, nihil sapiente accusamus ab repellat facere amet, numquam, quibusdam iure laboriosam ipsam odio tenetur. Quis, enim consequatur.</div>
	<hr>
		<h4>文本修饰效果</h4>
		<!-- 文本修饰相关属性
		 知识点7：text-decoration属性：设置超链接效果
		 -->
		<a class="c1 c2" href="http://ehall.tsgzy.edu.cn/new/index.html">实现跳转【方式：6种】</a>
		<div style="height: 800px;"></div>
		<marquee>
			<h4>处理文本效果</h4>
		</marquee>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium quae optio, delectus accusantium aspernatur nisi porro? Sequi, tempore tenetur ea, ex ipsam natus quo at dolores blanditiis asperiores, cum non.</p>
	
	</body>
</html>